<template>
  <div class="page">
    <div class="class">
      <span
        v-for="(category, index) in categories"
        :key="index"
        :class="['category', { active: activeCategory === category }]"
        @click="switchCategory(category)"
      >
        {{ category }}
      </span>
    </div>
    <div class="box" v-if="movieList" v-loading="isLoading">
      <div class="item" v-for="item in movieList" :key="item.movieId">
        <movieItem :item="item"></movieItem>
      </div>
    </div>
    <div class="bottom" v-loading="isLoading" v-if="movieList">
      <el-pagination
        background
        layout="total, prev, pager, next,jumper"
        :page-count="12"
        :page-size="30"
        :total="total"
        :currentPage="currentPage"
        @current-change="pageChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import movieItem from "@/components/movieItem.vue";
import service from "@/utils/request";
export default {
  name: "showMovies",
  components: {
    movieItem,
  },
  data() {
    return {
      open: false,
      currentPage: 1,
      isLoading: true,
      total: 12530,
      activeCategory: "个性推荐", // 当前选中的电影类别
      categories: [
        "个性推荐",
        "高分优先",
        "Action",
        "Adventure",
        "Animation",
        "Children",
        "Comedy",
        "Crime",
        "Documentary",
        "Drama",
        "Fantasy",
        "Film-Noir",
        "Horror",
        "Musical",
        "Mystery",
        "Romance",
        "Sci-Fi",
        "Thriller",
        "War",
        "Western",
      ], // 电影类别列表
      totalNum: [
        { type: "个性推荐", count: 2000 },
        { type: "高分优先", count: 750 },
        { type: "Action", count: 3490 },
        { type: "Adventure", count: 2238 },
        { type: "Animation", count: 1461 },
        { type: "Children", count: 1384 },
        { type: "Comedy", count: 7586 },
        { type: "Crime", count: 2511 },
        { type: "Documentary", count: 1579 },
        { type: "Drama", count: 10763 },
        { type: "Fantasy", count: 1504 },
        { type: "Film-Noir", count: 223 },
        { type: "Horror", count: 2615 },
        { type: "Musical", count: 668 },
        { type: "Mystery", count: 1366 },
        { type: "Romance", count: 3322 },
        { type: "Sci-Fi", count: 1885 },
        { type: "Thriller", count: 4211 },
        { type: "War", count: 882 },
        { type: "Western", count: 410 },
      ],
      movieList: [],
      userInfo: {},
      movie: {
        movieId: 1,
        title: "hahahahahha",
        avgRating: 4.5,
        genres: "标签1|标签2|标签3",
      },
    };
  },
  watch: {
    activeCategory(newVal, oldVal) {
      let index = this.totalNum.findIndex((item) => {
        return item.type == newVal;
      });
      this.total = this.totalNum[index].count;

      const params = {
        genres: newVal,
        userId: this.userInfo.userId,
      };
      service.get("user/choosePrefer", { params }).then((res) => {
        if (res.code == 200) {
          console.log("更新电影偏好成功");
        } else {
          console.log("更新电影偏好失败");
        }
      });
    },
  },
  mounted() {
    this.userInfo = JSON.parse(localStorage.getItem("user"));
    let type;
    if (!this.$route.params.type) {
      this.activeCategory = "个性推荐";
    } else {
      type = this.$route.params.type;
    }

    if (type == "recommed") {
      this.activeCategory = "个性推荐";
    } else if (type == "rating") {
      this.activeCategory = "高分优先";
    } else {
      this.activeCategory = type;
    }
    console.log("load");
    this.loadData();
  },
  methods: {
    loadData() {
      this.isLoading = true;
      if (this.activeCategory == "个性推荐") {
        this.getRaecommendMovies();
      } else if (this.activeCategory == "高分优先") {
        this.getMoviesByRating();
      } else {
        this.getMoviesByGenres();
      }
    },

    pageChange(e) {
      this.currentPage = e;
      this.loadData();
    },
    //直接推荐电影
    getRaecommendMovies() {
      const params = {
        userId: this.userInfo.userId,
        page: this.currentPage - 1,
        size: 30,
      };
      // 发送 GET 请求
      service
        .get("/movies/recommendMovies", { params })
        .then((res) => {
          console.log("获取推荐电影");
          this.movieList = res.data;
          this.isLoading = false;
        })
        .catch((error) => {
          console.error("请求失败:", error);
        });
    },

    //通过评分推荐电影
    getMoviesByRating() {
      const params = {
        page: this.currentPage - 1,
        size: 30,
      };
      // 发送 GET 请求
      service
        .get("/movies/recommendByRating", { params })
        .then((res) => {
          console.log("通过评分获取推荐列表");
          this.movieList = res.data;
          this.isLoading = false;
        })
        .catch((error) => {
          console.error("请求失败:", error);
        });
    },

    //根据分类推荐
    // localhost:9090/movies/genresPage?genres=comedy&page=2&size=5
    getMoviesByGenres() {
      const params = {
        genres: this.activeCategory,
        page: this.currentPage - 1,
        size: 30,
      };
      // 发送 GET 请求
      service
        .get("/movies/genresPage", { params })
        .then((res) => {
          console.log("通过genres获取推荐列表");
          this.movieList = res.data;
          this.isLoading = false;
        })
        .catch((error) => {
          console.error("请求失败:", error);
        });
    },
    // 切换电影类别
    switchCategory(category) {
      this.activeCategory = category;
      this.currentPage = 1;
      this.loadData();
    },
  },
};
</script>

<style scoped lang="less">
.page {
  overflow: hidden;
  padding: 10px 0px 10px 5px;
  background-color: #2d2929; /* 暗色调背景 */
  color: #e0e0e0; /* 默认文字颜色 */
  .class {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;

    .category {
      padding: 8px 8px;
      font-size: 16px; /* 稍微调小的字体 */
      color: #e0e0e0; /* 未选中文字颜色 */
      cursor: pointer;
      border-radius: 10px; /* 圆角效果 */
      background-color: #4d4848; /* 未选中背景色 */
      transition: all 0.1s ease; /* 平滑过渡 */
      border: 2px solid transparent; /* 初始透明边框 */

      &:hover {
        background-color: #444; /* 鼠标悬停背景色 */
        color: #fff; /* 鼠标悬停文字颜色 */
      }

      &.active {
        background-color: #007bff; /* 选中背景色 */
        color: #fff; /* 选中文字颜色 */
        font-weight: bold;
        box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3); /* 选中阴影效果 */
        border: 2px solid #007bff; /* 选中边框 */
      }
    }
  }
  .box {
    display: flex;
    flex-wrap: wrap; /* 允许子元素换行 */
    gap: 10px; /* 可选：设置子元素之间的间距 */
    .item {
      margin-bottom: 5px;
      background-color: #2a2a2a;
      border-radius: 10px;
      overflow: hidden;
      outline: 1px solid #39393e; /* 替代 border */
      transition: all 0.3s ease;
      &:hover {
        outline: 2px solid #007bff; /* 替代 border */
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
        transform: translateY(-2px);
      }
    }
  }
  .bottom {
    margin-top: 20px;
    margin-bottom: 30px;
    text-align: center;
    color: #2449cf; /* 分页组件文字颜色 */
  }
}
</style>